<template>
  <div class="app-container">
    <el-button type="primary" @click="setRights()" style="margin:10px">添加权限</el-button>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="权限菜单">
        <template slot-scope="scope">
          <el-row>
            <!-- 一级菜单渲染 -->
            <el-col :span="5">
              <el-tag closable @close="deletePermission(3,scope.row.menuId)">{{scope.row.menuName}}</el-tag>
            </el-col>
            <!-- 二级和三级菜单渲染 -->
            <el-col :span="19">
              <!-- 二级菜单渲染 -->
              <el-row :class="[index == 0 ? '':'bdtop']" v-for="(item,index) in scope.row.children" :key="item.menuId">
                <el-col :span="6">
                  <el-tag type="success" closable @close="deletePermission(3,item.menuId)">{{item.menuName}}</el-tag>
                </el-col>
                <!-- 三级菜单渲染 -->
                <el-col :span="18">
                  <el-tag type="warning" v-for="item1 in item.children" :key="item1.menuId" closable @close="deletePermission(3,item1.menuId)">{{item1.menuName}}</el-tag>
                </el-col>
              </el-row>
              <!-- <el-tag>{{scope.row.children.menuName}}</el-tag> -->
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加管理员菜单权限"
               :visible.sync="dialogFormVisible">
      <el-tree :data="data"
               :props="defaultData"
               node-key="menuId"
               ref="multipleTable"
               show-checkbox>
      </el-tree>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="insertPermission()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRole, deletePermission } from '@/api/menu/role'
import { getLevelMenu, insertPermission } from '@/api/menu/menu'

export default {
  name: "CommunityAdmin",
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      needPage: true,
      listLoading: true,
      data: [],
      // deptref:[],
      defaultData: {
        label: 'menuName',
        children: 'children',
        disabled: "disabled"
      },
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  created() {
    this.fetchData()
    // this.getRegionList()
    // this.getMenuList()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      this.needPage = false
      getRole(3,this.pageIndex,this.pageSize,this.needPage).then(response =>{
        // console.log(response)
        this.list = response.obj.list
        // console.log(this.list)
        // localStorage.setItem("list",JSON.stringify(this.list))
        this.listLoading = false
      })
    },
     //添加权限
    setRights () {
      getLevelMenu(1, this.pageIndex, this.pageSize, this.needPage).then(response => {
        this.data = response.obj.list
        this.data.forEach((item) => {
          // console.log(item)
          if (item.children) {
            item.children.forEach((child) => {
              if (child.children) {
                child.children.forEach((grandson) => {
                  this.list.forEach((sel) => {
                    sel.children.forEach((chi) => {
                      chi.children.forEach((chison => {
                        if (chison.menuId == grandson.menuId) {
                          grandson.disabled = true
                          child.disabled = true
                          item.disabled = true
                        }
                      }))
                    })
                  })
                })
              }
              this.list.forEach((sel) => {
                sel.children.forEach((chi) => {
                  if (chi.menuId == child.menuId) {
                    child.disabled = true
                    item.disabled = true
                  }
                })
              })
            })
          } else {
            this.list.forEach((sel) => {
              if (item.menuId == sel.menuId) {
                item.disabled = true
              }
            })
          }
        });
      })
      this.dialogFormVisible = true
    },
    insertPermission () {
      let keys = this.$refs.multipleTable.getCheckedKeys();
      let parentKeys = this.$refs.multipleTable.getHalfCheckedKeys()
      // let allKeys = (keys.concat(parentKeys)).toString()
      let allKeys = keys.concat(parentKeys)
      let listKeys = []
      this.list.forEach((item) => {
        listKeys.push(item.menuId)
        if (item.children) {
          item.children.forEach((child) => {
            listKeys.push(child.menuId) 
            if (child.children) {
              child.children.forEach((grandson) => {
                listKeys.push(grandson.menuId) 
              })
            }
          })
        }
      })
      // console.log(listKeys)
      // console.log(allKeys)
      let newAllKeys = allKeys.filter((num) => {return !listKeys.includes(num)})
      // console.log(newAllKeys)
      insertPermission(3, (newAllKeys).toString()).then(response => {
        let message = response.msg
        this.$message({
          type: 'success',
          message: message
        })
        this.fetchData()
      })
      this.dialogFormVisible = false
    },

    //删除权限
    deletePermission (roleId, menuId) {
      deletePermission(roleId, menuId).then(response => {
        this.$message({
          message: response.msg,
          type: 'success'
        })
        this.fetchData()
      })
    }
  }
}
</script>

<style scoped>
.el-tag{
  margin: 7px;
  size: 30px
}
.el-row{
  display: flex;
  align-items: center;
}
.bdtop{
  border-top: 1px solid #eee
}
</style>